<template>
    <div class="wrapper">
        <div class="count">
            <span>围观人数：</span>{{totalBrowserCount}}  <span>中奖人数：</span>{{ totalcount }}
        </div>
        <div class="music" @click="isPlay" :class="{'bor':!isplay}">
            <img src="http://assets.rurushishi.com/activies/hcAct/music.png" alt="">
        </div>
        <div class="wMain">
            <div class="wBtn">
                <div class="shackbtn" @click="shackbtn(0)">
                    <img src="http://assets.rurushishi.com/activies/hcAct/shackGoods.png" alt="">
                </div>
                <div class="houseBtn" @click="shackbtn(1)">
                    <img src="http://assets.rurushishi.com/activies/hcAct/houseBtn.png" alt="">
                </div>
            </div>
            <div class="prizeBtn" @click="shackbtn(2)">
                <img src="http://assets.rurushishi.com/activies/hcAct/myPrize.png" alt="">
            </div>
        </div>
        <div class="botText">本活动由原圈网络提供技术支持</div>
        <share :isshare="isshare"></share>
        <Progress :isOk="isOk"></Progress>
    </div>
</template>
<script>
    import request from "@/utils/request";
    //import { mapMutations } from "vuex";
    //import wxsdk from "@/utils/wxsdk";
    import {mapState, mapMutations} from "vuex";
    import wx from "weixin-js-sdk";
    import * as config from "./config";
    import Cookies from "js-cookie";
    import Share from "@/components/common/Sharehc";
    import Progress from "@/components/common/Progress";

    export default {
        data() {
            return {
                totalcount: 0,
                totalBrowserCount: 0,
                reOpenid: '',
                openid: Cookies.get("openid"),
                isplay: false,
                isshare: false,
                isOk: true,
                paths: [
                    {
                        path: "/shack"
                    },
                    {
                        path: "/house"
                    },
                    {
                        path: "/prize"
                    }
                ]
            };
        },
        methods: {

            addBroswerCount() {
                let _self = this;
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/valentine/ValentineAction/addBroswerCount",
                        requestParam: {
                            actcode: config.ACT_CODE
                        }
                    })
                    .then(response => {
                    });
            },
            getActData() {
                let _self = this;
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/relay/RelayAction/getActData",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            groupcode: config.ACT_CODE
                        }
                    })
                    .then(response => {
                        _self.totalBrowserCount = response.obj.totalBrowserCount * 2
                        _self.totalcount = response.obj.totalcount * 2
                    });
            },
            shackbtn(id) {
                // window.ConfigAudio.pause();
                this.isplay = true
                // this.$router.push(this.paths[id].path);
                window.location.href = location.protocol + '//' + location.host + '/act/hcact' + this.paths[id].path + '?channel=' + this.channel + '&reOpenid=' + this.reOpenid;
            },
            isPlay() {
                let _self = this;
                if (!_self.isplay) {
                    window.ConfigAudio.pause();
                    _self.isplay = true;
                } else {
                    window.ConfigAudio.play();
                    _self.isplay = false;
                }
            },
            ...mapMutations({
                setInfo: "SET_INFO",
                setChannel: "SET_CHANNEL"
            })
        },
        computed: {
            ...mapState(["info", "channel"])
        },
        components: {
            share: Share,
            Progress: Progress
        },
        mounted() {
            this.isOk = false;  //加载动画
            this.addBroswerCount();
            this.getActData();
            if (!window.ConfigAudio) {
                window.ConfigAudio = new Audio()
                window.ConfigAudio.src = 'http://rs.static.quanc.com.cn/activies/mfAct/2.mp3';
                wx.ready(function () {
                    window.ConfigAudio.play();
                });
            } else {
                window.ConfigAudio.src = 'http://rs.static.quanc.com.cn/activies/mfAct/2.mp3';
                wx.ready(function () {
                    window.ConfigAudio.play();
                });
            }

            this.reOpenid = this.$route.query.reOpenid ? this.$route.query.reOpenid : '';
            let _self = this;
            this.global.SHARE_CALLBACK_OK = function (type) {
                request
                    .get(_self.global.API_URL, {
                        action: "/activity/relay/RelayAction/share",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            prizecode: 'prize_1',
                            channel: _self.channel,
                            referenceopenid: _self.reOpenid
                        }
                    })
                    .then(response => {

                    });

            };
            config.initShare();
        },
        created() {
            this.isshare = this.$route.query.isShare ? this.$route.query.isShare : false;
            this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
            if (!this.info.mobile) {
                request
                    .get(this.global.API_URL, {
                        action: "/activity/relay/RelayAction/getActUserInfo",
                        requestParam: {
                            actcode: config.ACT_CODE,
                            referenceopenid: ""
                        }
                    })
                    .then(response => {
                        this.setInfo(response.obj);
                        if (this.info && this.info.nickname && this.info.nickname != '') {
                            this.global.SHARE_TITLE = "大力士【" + this.info.nickname + "】摇中大礼，测测你的臂力";
                        }
                        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/hcact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
                    });
            }
            this.global.SHARE_LINK= location.protocol + '//' + location.host + '/act/hcact/index?channel=' + this.channel + '&reOpenid=' + this.openid;
        },
    };
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/mixins.styl';
    .wrapper {
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: url('http://assets.rurushishi.com/activies/hcAct/main.jpg') repeat center center;
        background-size: 100% 100%;
    }

    .bor {
        animation: Rotate 1s infinite linear;
    }

    .music {
        position absolute
        top .2rem
        right .2rem
        width: 1rem
        height: 1rem
    }

    .music > img {
        width: 100%
        height: 100%
    }

    .wMain {
        position absolute
        top: 69%
        width: 100%
    }

    .wBtn {
        display flex
    }

    .wBtn .shackbtn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wBtn .shackbtn > img {
        animation: shakes 1s infinite linear;
        display block
        size 2.54rem .76rem
    }

    .wBtn .houseBtn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wBtn .houseBtn > img {
        animation: shakes 1s infinite linear;
        display block
        size 2.54rem .76rem
    }

    .wMain .prizeBtn {
        padding-top .5rem
    }

    .wMain .prizeBtn > img {
        size 2.54rem .76rem
        display block
        margin 0 auto
    }

    @keyframes roll {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(360deg);
        }
    }

    @keyframes shakes {
        0% {
            transform: rotate(0)
        }
        5% {
            transform: rotate(10deg)
        }
        10% {
            transform: rotate(-9deg)
        }
        15% {
            transform: rotate(8deg)
        }
        20% {
            transform: rotate(-7deg)
        }
        25% {
            transform: rotate(6deg)
        }
        30% {
            transform: rotate(-5deg)
        }
        35% {
            transform: rotate(4deg)
        }
        40% {
            transform: rotate(-3deg)
        }
        45% {
            transform: rotate(2deg)
        }
        50% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(0deg)
        }
    }

    @keyframes Rotate {
        from {
            transform: rotate(360deg)
        }
        to {
            transform: rotate(0deg)
        }
    }

    .count {
        width: 100%
        padding-left .5rem
        box-sizing border-box
        color #fdf1a0
        position absolute
        top: 1.3rem
        left 0
    }
    .count>span{
        color #fff
    }
    .botText{
        position fixed
        width 100%
        background-color #000
        opacity .7
        color #fff
        font-size .24rem
        text-align center
        line-height .5rem
        bottom 0
        left 0
    }
</style>
